<template>
  <div>
    <!-- 搜索-->
    <el-form ref="formSearch" :model="formSearch" size="small" inline>
      <el-form-item>
        <el-input
          v-model.trim="formSearch.param.apiName"
          placeholder="请输入接口名称"
          maxlength="20"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          clearable
          v-model="formSearch.param.type"
          placeholder="请选择接口分类"
          style="width: 100%"
        >
          <el-option
            v-for="item in typeData"
            :key="item.dicValue"
            :label="item.dicLabel"
            :value="item.dicValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <span class="wrap-btn wrap-primary" @click="search">查询</span>
        <span class="wrap-btn wrap-success" @click="addAll">批量授权</span>
      </el-form-item>
    </el-form>
    <!-- 数据列表 -->
    <el-table
      :data="tableData"
      :header-cell-style="{ background: '#F6F7F9' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="index"
        width="50"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column type="selection" width="45"> </el-table-column>
      <el-table-column prop="apiName" label="接口名称"></el-table-column>
      <el-table-column prop="url" label="接口地址"></el-table-column>
      <el-table-column prop="type" label="接口分类"></el-table-column>
      <el-table-column prop="apiDesc" label="描述">
        <template slot-scope="scope">
          <el-tooltip
            popper-class="ellipsis-tip"
            :content="scope.row.apiDesc"
            placement="top-start"
          >
            <span class="ellipsis">{{ scope.row.apiDesc }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="操作" width="80" align="center">
        <template slot-scope="scope">
          <el-dropdown @command="(command) => handle(command, scope.row)">
            <span class="el-dropdown-link">
              更多
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="authorization">授权</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <web-page
      :page="formSearch.pageNum"
      :size="formSearch.pageSize"
      :total="total"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
    ></web-page>
    <!-- 对话框 -->
    <el-drawer :title="title" :wrapperClosable="false" :visible.sync="visible">
      <el-form label-width="120px" :model="form">
        <el-form-item label="并发次数/分钟" required>
          <el-input-number
            v-model="form.apiFlowParam.qpsConcurrency"
            :min="1"
            :max="100000"
            step-strictly
            style="width: 100%"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="日限流次数" required>
          <el-input-number
            v-model="form.apiFlowParam.qpsDayLimit"
            :min="1"
            :max="100000"
            step-strictly
            style="width: 100%"
          ></el-input-number>
        </el-form-item>
        <el-form-item style="text-align: end">
          <span class="wrap-btn wrap-success" @click="save">确定</span>
          <span class="wrap-btn wrap-default" @click="visible = false">取消</span>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props: {
    isChange: {
      typeof: String,
      default: () => {
        return ''
      },
    },
  },
  data() {
    return {
      typeData: [],
      formSearch: {
        pageNum: 1,
        pageSize: 10,
        param: {
          serviceId: this.$route.query.serviceId,
        },
      },
      total: null,
      tableData: [],
      visible: false,
      title: '添加授权',
      form: {
        apiFlowParam: {},
        apiId: [],
        serviceId: this.$route.query.serviceId,
      },
    }
  },
  watch: {
    isChange(val) {
      if (val == 'first') {
        this.itemList()
      }
    },
  },
  created() {
    this.typeList()
    this.itemList()
  },
  methods: {
    itemList() {
      // 获取列表
      this.$axios
        .post('/admin/service/api/pageApi', this.formSearch)
        .then((data) => {
          this.tableData = []
          if (data.code == 200) {
            this.tableData = data.data.list
            this.total = data.data.total
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    sizeChange(val) {
      //每页条数
      this.formSearch.pageSize = val
      this.itemList()
    },
    currentChange(val) {
      //分页
      this.formSearch.pageNum = val
      this.itemList()
    },
    search() {
      //搜索
      this.formSearch.pageNum = 1
      this.itemList()
    },
    addAll() {
      //批量新建
      this.form.apiFlowParam = {}
      this.form.serviceId = this.$route.query.serviceId
      this.visible = true
    },
    handle(command, row) {
      //操作
      if (!command) {
        this.$message.error('菜单选项缺少command属性')
        return
      }
      switch (command) {
        case 'authorization':
          //授权
          this.form = {
            apiFlowParam: {},
            apiId: [
              {
                id: row.id,
                method: row.method,
              },
            ],
            serviceId: this.$route.query.serviceId,
          }
          this.title = '新建授权'
          this.visible = true
          break
      }
    },
    save() {
      //保存
      if (!this.form.apiFlowParam.qpsConcurrency) {
        this.$message.error('请输入并发次数')
        return
      }
      if (!this.form.apiFlowParam.qpsDayLimit) {
        this.$message.error('请输入日限流次数')
        return
      }
      if (this.form.apiId.length == 0) {
        this.$message.error('请选择授权接口')
        return
      }
      this.$axios.post('/admin/service/api/add', this.form).then((data) => {
        if (data.code == 200) {
          this.visible = false
          this.$message.success('操作成功！')
          this.itemList()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    handleSelectionChange(val) {
      //选中表格
      this.form.apiId = []
      val.forEach((element) => {
        this.form.apiId.push({
          id: element.id,
          method: element.method,
        })
      })
    },
    typeList() {
      // 获取接口分类
      this.$axios.get('/admin/dic/listDic?type=api_url').then((data) => {
        this.typeData = []
        if (data.code == 200) {
          this.typeData = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
